<template>
  <div class="construction-container">
    <img :src="$store.state.appBgInfo.default" class="construction-bg" alt="">
    <img class="construction-logo" src="@/assets/images/construction/logo.gif" alt="">
    <div :class="['nav1',{nav_text_foc: focs[0]}]">返回本校</div>
    <div :class="['nav2',{nav_text_foc: focs[1]}]">不返回</div>

  </div>
</template>

<script>
  import mixinCommon from "@/assets/js/mixin-common"

  export default {
    name: "construction",
    mixins: [mixinCommon],
    props:{
      gotoUrl: {
        type: String,
        default: '/tbkt'
      }
    },
    data() {
      return {
        focs: [false, false]
      }
    },
    methods:{
        changeSchool(){
          this.hs.ajax.get(
            "http://" +
            this.$store.state.domain +
            "/SMSCH-STB/stb/change-sch?stbid=" + this.bridge.stbid +"&schoolId=" + this.$store.getters.user.clazz.grade.school.id,
            data => {
              data = JSON.parse(data);
              //console.log(data);
            },
            0,
            function(msg) {},
            3000
          );
          this.$store.commit("setSchool", this.$store.getters.user.clazz.grade.school);
        }
    },
    created() {
      new fObject(102, 0, null, null, null, null, '102-1')
      new fObject(102, 1, null, null, null, '102-0', null)
      this.hs.fObjCommit()

      this.hs.addFocus([102], (group, objid, objindex)=>{
        this.$set(this.focs, objindex, true)
      })

      this.hs.addBlur([102], (group, objid, objindex)=>{
        this.$set(this.focs, objindex, false)
      })

      this.hs.addSelect([102], (group, objid, objindex)=>{
          if(objindex === 0){
            this.changeSchool()
            this.$emit('close')
          }else {
            this.$router.push(this.gotoUrl)
          }
      })
    },
    mounted() {
      this.hs.initFocus('102-0')
    }
  }
</script>

<style scoped lang="less">
  .construction-container {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 1920px;
    height: 1080px;
    .construction-bg, .construction-logo {
      position: absolute;
      left: 0px;
      top: 0px;
      width: 1920px;
      height: 1080px;
    }
    .nav1, .nav2 {
      position: absolute;
      left: 500px;
      top: 850px;
      width: 398px;
      height: 121px;
      background-image: linear-gradient(#53ceff, #6ec6e8);
      border-radius: 80px;
      line-height: 121px;
      font-size: 55px;
      text-align: center;
      border: 2px solid transparent;
      overflow: hidden;
      z-index: 999;
    }
    .nav2{
      left: 1000px;
    }
    .nav_text_foc {
      transform: scale(1.1);
      -webkit-transform: scale(1.1);
      border: 2px solid #fff;
      background: #0e60e9;
      color: #fff;
    }
  }

</style>
